<template>
  <!--领导批示-->
  <div class="view" :style="{ '--theme': $store.getters.themeColor }">
    <el-row> </el-row>
    <el-table border style="width: 100%" :data="viewDataSouse">
      <el-table-column
        label="申请人"
        prop="userName"
        align="center"
      ></el-table-column>
      <el-table-column
        label="申请人组织"
        prop="userOrgName"
        align="center"
        min-width="95"
      ></el-table-column>
      <el-table-column label="申请环节" prop="orderStatus" align="center">
        <template slot-scope="scope">
          <span>{{ getOrderStatusName(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="申请时间" align="center">
        <template slot-scope="scope">
          <span>{{ timeFormat(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="请示内容"
        align="center"
        :show-overflow-tooltip="false"
      >
        <template slot-scope="{ row }">
          <CustomTooltip :content="row.content"></CustomTooltip>
        </template>
      </el-table-column>
      <el-table-column
        label="批示人"
        prop="leaderName"
        align="center"
      ></el-table-column>
      <el-table-column
        label="批示人组织"
        prop="leaderOrgName"
        align="center"
        min-width="100"
      ></el-table-column>
      <el-table-column label="是否同意" prop="status" align="center">
        <template slot-scope="scope">
          {{
            scope.row.status == "0"
              ? "待审批"
              : scope.row.status == "1"
              ? "同意"
              : scope.row.status == "2"
              ? "不同意"
              : scope.row.status
          }}
        </template>
      </el-table-column>
      <el-table-column label="批示完成时间" align="center" min-width="108">
        <template slot-scope="scope">
          <span>{{ timeFormat(scope.row.auditTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="批示意见"
        align="center"
        :show-overflow-tooltip="false"
      >
        <template slot-scope="{ row }">
          <CustomTooltip :content="row.auditContent"></CustomTooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { DateFormat } from "@/utils/public";
import CustomTooltip from "@/components/table/CustomTooltip.vue";

export default {
  name: "leadershipInstructions",
  components: { CustomTooltip },
  props: {
    viewDataSouse: {
      //视图数据源
      type: Array,
      default: [],
    },
  },
  methods: {
    //时间格式化
    timeFormat(time) {
      if (time != null) {
        return DateFormat.utcTimeToStrTime(time);
      }
    },
    orderFlow(val) {
      switch (val) {
        case "0":
          return "误报";
        case "1":
          return "研判环节";
        case "2":
          return "待调度";
        case "3":
          return "待认领";
        case "4":
          return "待处置";
        case "5":
          return "待核实";
        case "6":
          return "已完结";
        case "5":
          return "重复告警";
      }
    },
    orderStatusFun(val) {
      switch (val) {
        case "0":
          return "待审批";
        case "1":
          return "同意";
        case "2":
          return "不同意";
      }
    },
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      return (
        "background: #F8F8F8;\n" +
        "border-radius: 5px 0px 0px 0px;\n" +
        "border: 1px solid #EEEEEE;\n" +
        "font-size: 14px;\n" +
        "font-family: PingFangSC-Regular, PingFang SC;\n" +
        "font-weight: 400;\n" +
        "color: #333333;\n" +
        "height: 40px;"
      );
    },
    getOrderStatusName(val) {
      if (
        val.enableAcceptanceMode === "1" ||
        val.enableAcceptanceMode === "2"
      ) {
        return "受理";
      }
      return val.orderStatusName;
    },
  },
};
</script>

<style lang="scss" scoped>
$theme: var(--theme);
.view {
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  // box-shadow: 0px 10px 12px 3px rgba(213, 210, 233, 0.55);
  //border-radius: 8px;
}
// .title-class {
//   display: inline-block;
// }
// .title {
//   height: 3vh;
//   background: $theme;
//   border-radius: 17px;
//   margin-top: 1vh;
//   /*margin-left: 3vh;*/
//   display: flex;
//   align-items: center;
// }

.icon {
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 50%;
  margin-left: 1vh;
  margin-right: 1vh;
}
.title-name {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 22px;
  margin-right: 2vh;
}
.titleName {
  float: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100%;
  font-size: 10px;
  padding: 0.3vh 0px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #98a0a7;
}

.value {
  float: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100%;
  padding: 0.3vh 0px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  display: contents;
}
.el-row {
  //margin-bottom: 2vh;
}
.line {
  border: 1px dashed #b4bdc5;
}
</style>
